<template>
  <div class="container">
    <view v-if="[0,2].includes(current)">
      <view class="mobile">
        <uv-icon name="https://oss.seenlove.com/images/df07737615ccebbb538e5786c6d53c48.png" size="57"></uv-icon>
      </view>
      <view class="title fz20 bold textCenter" v-if="current== 0">验证当前手机号</view>
      <view v-else class="title fz20 bold textCenter">输入新手机号</view>
      <view class="desc textCenter fz12" v-if="current== 0">通过安全检测后可换绑新手机号</view>
      <view class="desc textCenter fz12" v-else>绑定成功后，可使用新手机号登录</view>

      <view class="input flex alignCenter">
        <view class="bun fz16 bold">+86</view>
        <uv-input inputAlign="center" border="surround" :disabled="current==0" v-model="phone" :customStyle="customStyle"></uv-input>
      </view>
    </view>

    <view v-else>
      <view class="mobile">
        <uv-icon name="https://oss.seenlove.com/images/f8ce019117fd86ce4da27fd330ec8522.png" size="57"></uv-icon>
      </view>
      <view class="title fz20 bold textCenter">输入验证码</view>
      <view class="desc textCenter fz12">已给 +86 {{phone}}发送了一条验证码</view>

      <view class="input">
        <uv-input inputAlign="center" border="surround" v-model="code" :customStyle="customStyle"></uv-input>
      </view>

      <view class="fz12 textCenter sendAgain textCenter" @click="sendCode">重新发送</view>
    </view>

    <view class="next" @click="currentChange">
      <view class="icon">
        <uv-icon name="arrow-rightward" color="#fff"></uv-icon>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let current = ref(0);
let customStyle = ref({
  borderColor: "#9E06FF !important",
  background: "#FAFAFA",
  borderRadius: "8px !important",
});
let phone = ref("");
let code = ref(""); //验证码

onShow(() => {
  phone.value = counter.slParams.mobile;
});

async function currentChange() {
  try {
    if ([0, 2].includes(current.value)) {
      if (!phone.value) return proxy.$utils.showToast("请输入手机号");
      await sendCode();
      current.value++;
    } else {
      if (!code.value) return proxy.$utils.showToast("请输入验证码");
      await proxy.$apis.checkCode({ phone: phone.value, code: code.value });
      phone.value = "";
      if (current.value === 1) {
        current.value++;
        code.value = "";
      } else {
        await proxy.$apis.updatePhone({ phone: phone.value, code: code.value });
        proxy.$utils.showToast("绑定成功");
        setTimeout(() => {
          proxy.$utils.back();
        }, 1500);
      }
    }
  } catch (error) {}
}

async function sendCode() {
  await proxy.$apis.sendMsg({ phone: phone.value });
}
</script>



<style lang="scss" scoped>
.container {
  padding-top: 80px;
  .mobile {
    width: 57px;
    margin: auto;
  }
  .title {
    padding: 15px 0 8px;
  }
  .desc {
    color: #999;
    margin-bottom: 20px;
  }
  .input {
    width: 250px;
    margin: auto;
    .bun {
      padding: 9px;
      border-radius: 8px;
      background-color: #f2f2f2;
      margin-right: 7px;
    }
  }
  .sendAgain {
    color: #9e06ff;
    margin-top: 20px;
  }
  .next {
    background-color: #cf84ff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: relative;
    margin: 60px auto 0;
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>





